<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.enterprise_name"
          placeholder="企业名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumRefundStatus"
          v-model="params['refund_status.eq']"
          placeholder="退费状态"
          clearable
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getCountData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="fa fa-sitemap" @click="handleFlow()">审批流程</el-button>
      </el-form-item>

      <div class="text-muted" v-loading="countLoading">
        退保项目数：
        <span class="text-primary">{{ tableCount.p || '-' }}</span>
        。担保金额：
        <span class="text-primary">{{ tableCount.p1 || '-' }}</span>
        元。退费金额：
        <span class="text-primary">{{ tableCount.p2 || '-' }}</span>
        元。
      </div>
    </el-form>

    <c-table border v-loading="loading" :stripe="false" :columns="tableColumns" :data="tableData">
      <template v-slot:refunds="scope">
        <span class="badge" :class="`badge-${scope.row.refundsStatusStyle}`">
          {{ scope.row.refundsStatus }}
        </span>
        <div>
          <small>{{ scope.row.refund_time || '' }}</small>
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <flow-dialog
      title="退保审批流程"
      :visible.sync="flowVisible"
      flow-key="BH_QUIT_APPROVAL"
    ></flow-dialog>

    <edit-dialog
      :visible.sync="editVisible"
      :table-id="tableId"
      @success="getData()"
      :view-mode="viewMode"
    ></edit-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FlowDialog from '@/credit/components/flow/ViewDialog'
import { getFollowInfo } from '@/credit/mixin/taskTableCountyUnionProvince'
import editDialog from '@/bigcredit/views/letter/refunds/components/MainDialog'
export const enumMemoType = {
  1: '项目取消',
  2: '流标',
  3: '延期',
  9: '其它',
}
const enumApprovalStatus = {
  1: '待处理',
  2: '已处理',
}

const enumRefundStatus = {
  0: '未受理',
  10: '已受理',
  11: '受理成功',
  20: '退款成功',
  30: '退款失败',
  40: '退票',
}

const enumRefundStatusStyle = {
  0: 'info',
  10: 'primary',
  11: 'primary',
  20: 'success',
  30: 'danger',
  40: 'danger',
}
export default {
  components: {
    FlowDialog,
    editDialog,
  },
  props: {},
  data() {
    return {
      enumRefundStatus,
      params: {
        index: 1,
        size: 15,
      },
      loading: true,
      order: {
        create_time: 'desc',
      },
      tableName: 'guarantee_quit_view',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '序号', prop: 'index', align: 'center' } },
        { attrs: { label: '企业名称', prop: 'enterprise_name', minWidth: 120 } },
        { attrs: { label: '保函类型', align: 'center' }, process: () => '投标保函' },
        { attrs: { label: '标段/标包编号', prop: 'section' } },
        { attrs: { label: '担保金额（元）', prop: 'tender_bond', align: 'center' } },
        { attrs: { label: '缴费金额（元）', prop: 'gua_fee', align: 'center' } },
        { attrs: { label: '申请时间', prop: 'gs_create_time', align: 'center', width: 100 } },
        {
          attrs: {
            label: '退保原因说明',
            prop: 'memo',
            align: 'center',
          },
          process: v => enumMemoType[v],
        },
        { attrs: { label: '处理状态', prop: 'approvalStatus', align: 'center' } },
        {
          attrs: { label: '退费状态', prop: 'refundsStatus', align: 'center', width: 90 },
          slot: 'refunds',
        },
        { attrs: { label: '待处理人', prop: 'innerFollow', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [
            {
              content: '项目审批',
              icon: 'fa fa-gavel',
              event: this.handleApprove,
              attrs: { class: 'p-0 m-2' },
              ifRender: row => row.editEnable,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
          ],
        },
      ],
      flowVisible: false,
      viewMode: false,
      editVisible: false,
      tableId: '',

      countLoading: false,
      tableCount: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
    this.getCountData()
  },
  mounted() {},
  methods: {
    getCountData() {
      this.countLoading = true
      this.$api
        .getData(this.$serviceName, this.tableName, {
          'service_id.eq': this.clientId,
          'refund_status.eq': 20,
          groupFunc: `count(distinct(${this.tableName}.customer_related_id)),round(sum(${this.tableName}.tender_bond)|2),round(sum(${this.tableName}.gua_fee)|2)`,
        })
        .then(res => {
          this.tableCount = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    handleApprove(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.tableId = row.id || ''
    },
    handleView(row) {
      this.editVisible = true
      this.viewMode = true
      this.tableId = row.id
    },
    handleFlow() {
      this.flowVisible = true
    },
    dataAdapter(row, index) {
      row.index = this.totalCount - index - this.params.size * (this.params.index - 1)
      row.section = row.section_code ? `${row.section_name}-${row.section_code}` : row.section_name
      row.approvalStatus = enumApprovalStatus[row.approval_status]
      row.refundsStatus = enumRefundStatus[row.refund_status || 0]
      row.refundsStatusStyle = enumRefundStatusStyle[row.refund_status || 0]
      row.innerFollow = ''
      return row
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.totalCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
          return getFollowInfo(this.tableData.map(item => item.id))
        })
        .then(follow => {
          this.tableData = this.tableData.map(it => {
            const data = follow.find(item => item.wf_related_id === it.id) || {}
            it.innerFollow = data.innerFollow || ''
            it.editEnable = data.task_person?.includes(this.userId) ?? false
            return it
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
